<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="treeName"
            placeholder="请输入证书类别"
            clearable
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container tree-container">
          <el-tree
            :data="treeOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick"
            :highlight-current="true"
            node-key="id"
            :default-expanded-keys="defaultExpandkeys"
            accordion
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <!-- 搜索  关键字：手机号+姓名 -->
        <el-form
          :model="queryParams"
          ref="queryForm"
          v-show="showSearch"
          :inline="true"
          label-width="80px"
        >
          <el-form-item label="部门" prop="deptId">
            <treeselect
              v-model="queryParams.deptId"
              :options="deptOptions"
              :show-count="true"
              placeholder="请选择部门"
              style="width: 240px"
              size="small"
              @input="handleQuery"
            />
          </el-form-item>
          <el-form-item label="关键字" prop="keywords">
            <el-input
              v-model="queryParams.keywords"
              placeholder="请输入姓名/证书号"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
              size="small"
            />
          </el-form-item>
          <el-form-item label="复审日期">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleQuery"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="证书状态（正常/过期）"
            label-width="160px"
            prop="overdue"
          >
            <el-switch
              v-model="queryParams.overdue"
              :active-value="1"
              :inactive-value="0"
            @change="handleQuery"
            ></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              v-hasPermi="['51110']"
              @click="handleAdd"
              >添加</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport"
              >证书导入</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >证书导出</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="tableList" :border="true">
          <el-table-column
            label="证书类别"
            prop="category"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="员工姓名" prop="personnel" align="center">
            <template slot-scope="scope">
              <span @click="handleDetail(scope.row)" class="active">{{
                scope.row.personnel
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别" prop="genderVal" align="center" />
          <el-table-column
            label="所属部门"
            prop="deptName"
            align="center"
            width="140"
          ></el-table-column>
          <el-table-column
            label="发证机关"
            prop="lssuingAuthority"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="证书名称"
            prop="certName"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span @click="certSee(scope.row)" class="active">{{
                scope.row.certName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="证书编号"
            prop="certCode"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="初审日期"
            align="center"
            prop="startTime"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="复审日期"
            align="center"
            prop="endTime"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="单位类型" prop="unitType" align="center" />
          <el-table-column label="证书状态" align="center" key="overdue">
            <template slot-scope="scope">
              <span>{{ findOverdue(scope.row.overdue) }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            align="center"
            prop="img"
            label="证书照片"
            width="240"
          >
            <template slot-scope="scope">
              <img
                v-if="scope.row.certPic"
                :src="scope.row.certPic.split(',')[0]"
                width="200"
                height="100"  
                style="cursor: pointer;"
                @click="handlePictureCardPreview(scope.row.certPic.split(',')[0])"
              />
            </template>
          </el-table-column> -->
          <el-table-column
            label="添加时间"
            prop="addTime"
            align="center"
            width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="添加人" prop="publisher" align="center" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-hasPermi="['51120']"
                @click="handleUpdate(scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                v-hasPermi="['51130']"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.currentPage"
          :limit.sync="queryParams.pagesize"
          @pagination="getList"
        />

        <!-- 预览证书图片 -->
        <el-dialog
          :visible.sync="dialogVisible"
          title="预览"
          width="800"
          append-to-body
        >
          <img
            :src="dialogImageUrl"
            style="display: block; max-width: 100%; margin: 0 auto"
          />
        </el-dialog>

        <!-- 证书 -->
        <el-dialog
          title="个人证书信息"
          :visible.sync="open"
          width="1000px"
          append-to-body
        >
          <el-form
            ref="formCert"
            :model="formCert"
            :validate-on-rule-change="false"
            label-width="80px"
            :inline="true"
          >
            <el-form-item label="员工姓名" prop="personnel">
              <el-input v-model="formCert.personnel" disabled />
            </el-form-item>
            <el-form-item label="性别" prop="genderVal">
              <el-input v-model="formCert.genderVal" disabled />
            </el-form-item>
            <el-form-item label="所属部门" prop="deptName">
              <el-input v-model="formCert.deptName" disabled />
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="formCert.idCard" disabled />
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                v-hasPermi="['51110']"
                @click="handleAddCert"
                >证书添加</el-button
              >
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                >证书导出</el-button
              >
            </el-col>
            <right-toolbar
              :showSearch.sync="showSearch"
              @queryTable="getListCert"
            ></right-toolbar>
          </el-row>

          <el-table
            v-loading="loading2"
            :data="tableList2"
            :border="true"
            max-height="600px"
          >
            <!-- <el-table-column
              label="证书编号"
              prop="certCode"
              align="center"
              :show-overflow-tooltip="true"
            /> -->
            <el-table-column
              label="证书类别"
              prop="category"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="证书名称" prop="certName" align="center">
              <template slot-scope="scope">
                <span @click="certSee(scope.row)" class="active">{{
                  scope.row.certName
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="初审日期" align="center" prop="startTime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.startTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="复审日期" align="center" prop="endTime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.endTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="发证机关"
              prop="lssuingAuthority"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              align="center"
              prop="img"
              label="证书照片"
              width="80"
            >
              <template slot-scope="scope">
                <imagePreview v-if="scope.row.certPic" :src="scope.row.certPic.split(',')[0]" />
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              fixed="right"
              width="100"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  v-hasPermi="['51120']"
                  @click="handleUpdate(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  v-hasPermi="['51130']"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="certTotal > 0"
            :total="certTotal"
            :page.sync="certParams.currentPage"
            :limit.sync="certParams.pagesize"
            @pagination="getListCert"
          />
        </el-dialog>

        <!-- 个人证书添加、修改 -->
        <el-dialog
          :title="titleAdd"
          :visible.sync="openAdd"
          width="620px"
          append-to-body
        >
          <!-- 员工姓名（自动）、*证书类别（下拉框）、证书编号、*证书名称、*发证机关、*初审日期、*复审日期、证书照片 -->
          <el-form
            ref="formAdd"
            :model="formAdd"
            :rules="formAddRules"
            :validate-on-rule-change="false"
            label-width="90px"
          >
            <el-row>
              <el-col :span="12">
                <!-- 添加 -->
                <el-form-item
                  v-if="!formAdd.theid && status === 1"
                  label="员工姓名"
                  prop="personnelId"
                >
                  <el-select
                    v-model="formAdd.personnelId"
                    placeholder="请选择"
                    filterable
                    :filter-method="dataFilter"
                    @change="changePersonnel"
                  >
                    <el-option
                      v-for="item in personnelOptions"
                      :key="item.theid"
                      :label="item.fullName"
                      :value="item.theid"
                    >
                      <span style="float: left">{{ item.fullName }}</span>
                      <span
                        style="
                          float: right;
                          margin-left: 10px;
                          color: #8492a6;
                          font-size: 13px;
                        "
                      >
                        {{ item.department }}
                      </span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <!-- 修改 -->
                <el-form-item
                  v-if="formAdd.theid || status === 2"
                  label="员工姓名"
                  prop="personnelName"
                >
                  <el-input v-model="formAdd.personnelName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证书类别" prop="categoryId">
                  <el-select
                    v-model="formAdd.categoryId"
                    @change="changeCert"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in certOptions"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="证书编号" prop="certCode">
                  <el-input
                    v-model="formAdd.certCode"
                    placeholder="请输入证书编号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证书名称" prop="certName">
                  <el-input
                    v-model="formAdd.certName"
                    placeholder="请输入证书名称"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="发证机关" prop="lssuingAuthority">
                  <el-input
                    v-model="formAdd.lssuingAuthority"
                    placeholder="请输入发证机关"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="初审日期" prop="startTime">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="formAdd.startTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择颁发时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="复审日期" prop="endTime">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="formAdd.endTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择到期时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 多图上传 -->
            <el-form-item label="证书图片" prop="certPic">
              <imageMultiUpload
                ref="mychild"
                v-model="formAdd.certPic"
                :theType="3"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>

        <!-- 个人证书显示 查看、打印 -->
        <el-dialog
          title="查看"
          :visible.sync="openAdd2"
          width="620px"
          append-to-body
        >
          <el-form
            ref="formAdd"
            :model="formAdd2"
            :validate-on-rule-change="false"
            label-width="90px"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="员工姓名" prop="personnelName">
                  <el-input v-model="formAdd2.personnelName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="genderVal">
                  <el-input v-model="formAdd2.genderVal" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属部门" prop="deptName">
                  <el-input v-model="formAdd2.deptName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号" prop="idCard">
                  <el-input v-model="formAdd2.idCard" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="证书类别" prop="categoryId">
                  <el-select
                    v-model="formAdd2.categoryId"
                    @change="changeCert"
                    disabled
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in certOptions"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证书编号" prop="certCode">
                  <el-input
                    v-model="formAdd2.certCode"
                    disabled
                    placeholder="请输入证书编号"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="证书名称" prop="certName">
                  <el-input
                    v-model="formAdd2.certName"
                    disabled
                    placeholder="请输入证书名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发证机关" prop="lssuingAuthority">
                  <el-input
                    v-model="formAdd2.lssuingAuthority"
                    placeholder="请输入发证机关"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="初审日期" prop="startTime">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="formAdd2.startTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择颁发时间"
                    disabled
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="复审日期" prop="endTime">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="formAdd2.endTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择到期时间"
                    disabled
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 多图上传 -->
            <el-form-item label="证书图片" prop="certPic">
              <imageMultiUpload
                ref="mychild2"
                v-model="formAdd2.certPic"
                :theType="3"
                disabled
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <!-- <el-button @click="submitForm" type="primary">打 印</el-button> -->
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>

        <!-- 用户导入对话框 -->
        <el-dialog
          :title="upload.title"
          :visible.sync="upload.open"
          width="400px"
          append-to-body
        >
          <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              <el-button
                type="warning"
                plain
                size="mini"
                @click="importTemplate"
                >下载模板</el-button
              >
            </div>
            <div class="el-upload__tip" style="color: red" slot="tip">
              提示：仅允许导入“xls”或“xlsx”格式文件！
            </div>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFileForm">确 定</el-button>
            <el-button @click="upload.open = false">取 消</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import imageMultiUpload from "@/components/ImageMultiUpload";
import {
  getCertCate,
  booklistData,
  addCert,
  getCertData,
  updateCert,
  delCert,
  getSelect,
} from "@/api/cert/personnelCert";
import { listData as personListData } from "@/api/system/personAdmin";

export default {
  name: "personnelCert",
  components: {
    Treeselect,
    imageMultiUpload,
  },
  data() {
    return {
      treeName: undefined,
      treeOptions: [],
      currentId: null,
      defaultExpandkeys: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      queryParams: {
        currentPage: 1,
        pagesize: 10,
        keywords: undefined,
        personnelType: 1, //持证人类型 1-企业内部员工 2-外委人员 3-培训讲师
        personnelId: undefined,
        deptId: undefined,
        category: undefined,
        overdue: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      dateRange: [],
      showSearch: true,
      total: 0,
      loading: true,
      tableList: [],
      ids: [],
      single: true,
      multiple: true,
      // 个人证书信息
      open: false,
      formCert: {},
      loading2: false,
      tableList2: [],
      certParams: {
        currentPage: 1,
        pagesize: 10,
        personnelType: 1, //持证人类型 1-企业内部员工 2-外委人员 3-培训讲师
        personnelId: undefined,
        deptId: undefined,
        category: undefined,
        overdue: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      certTotal: 0,
      // 个人证书添加、修改
      titleAdd: "",
      openAdd: false,
      formAdd: {},
      formAddRules: {
        categoryId: [
          { required: true, message: "请选择证书类别", trigger: "change" },
        ],
        certName: [
          { required: true, message: "证书名称不能为空", trigger: "blur" },
        ],
        lssuingAuthority: [
          { required: true, message: "发证机关不能为空", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请选择初审日期", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请选择复审日期", trigger: "change" },
        ],
      },
      // 查看、打印
      openAdd2: false,
      formAdd2: {},
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        // headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        // url: process.env.VUE_APP_BASE_API + "/system/user/importData",
        url: "",
      },
      deptOptions: [], //部门
      certOptions: [], //证书
      // 预览图片
      dialogImageUrl: "",
      dialogVisible: false,
      personnelOptions: [], //人员
      personnelOptions2: [], //人员
      personQueryParams: {
        currentPage: 1,
        pagesize: 100000,
        deptId: undefined,
        workIds: undefined,
        workType: undefined,
        post: undefined,
        keywords: undefined,
      },
      // 添加按钮
      status: 1, // 1 为任意人员添加  2 为指定人员添加
    };
  },
  watch: {
    // 根据名称筛选部门树
    treeName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getPageTree(); //获取证书类别 树
    this.getSelect();
    this.getPersonnelOptions();
    // this.form.avatar = this.avatars;
  },
  methods: {
    getPageTree() {
      getCertCate().then((response) => {
        this.treeOptions = response.result.certCategory;
        this.currentId = response.result.certCategory[0].id; //将节点id赋值给上级id
        this.$nextTick(() => {
          //默认当前选中（主要是为了样式）
          this.$refs.tree.setCurrentKey(this.currentId, true, false);
        });
        // this.defaultExpandkeys[0] = this.currentId;
        this.getList();
      });
    },
    handleNodeClick(data) {
      this.currentId = data.id;
      this.getList();
    },
    getList() {
      this.loading = true;
      if (this.dateRange != null) {
        this.queryParams.startTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
      }else {
        this.queryParams.startTime = undefined;
        this.queryParams.endTime = undefined;
      }
      this.queryParams.personnelId = 0;
      this.queryParams.category = this.currentId;
      booklistData(this.queryParams).then((response) => {
        this.tableList = response.result.rows;
        this.total = response.result.total;
        this.loading = false;
      });
    },
    getSelect() {
      getSelect().then((response) => {
        this.certOptions = response.result.certCategory; //证书类别
        this.deptOptions = response.result.department; //所属部门
      });
    },
    getPersonnelOptions() {
      personListData(this.personQueryParams).then((response) => {
        this.personnelOptions = response.result.rows;
        this.personnelOptions2 = response.result.rows;
      });
    },
    handleQuery() {
      this.queryParams.currentPage = 1;
      this.getList();
    },
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 点击姓名/详情  - 设置证书
    handleDetail(row) {
      this.formCert = row;
      this.open = true;
      this.certParams.personnelId = row.theid;
      this.getListCert();
    },
    handleDelete(row) {
      const theId = row.theid || this.ids;
      this.$confirm(
        '是否确认删除?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delCert(theId);
        })
        .then(() => {
          this.getList();
          this.getListCert();
          this.msgSuccess("删除成功");
        });
    },
    getListCert() {
      this.loading2 = true;
      this.certParams.personnelId = this.formCert.personnelId;
      booklistData(this.certParams).then((response) => {
        this.tableList2 = response.result.rows;
        this.certTotal = response.result.total;
        this.loading2 = false;
      });
    },
    certSee(row) {
      this.reset();
      const theId = row.theid;
      getCertData(theId).then((response) => {
        this.formAdd2 = response.result;
        this.formAdd2.personnelName = row.personnel; //员工姓名
        this.formAdd2.genderVal = row.genderVal; //性别
        this.formAdd2.deptName = row.deptName; //所属部门
        this.formAdd2.idCard = row.idCard; //身份证号
        this.$nextTick(() => {
          this.$refs["mychild2"].parentHandleclick(this.formAdd2.certPic);
        });
        this.openAdd2 = true;
      });
    },
    handleAdd() {
      this.reset();
      this.status = 1; //为任意人员添加
      // this.formAdd.personnelName = this.formCert.personnel;
      this.$nextTick(() => {
        this.$refs["mychild"].parentHandleclick(this.formAdd.certPic);
      });
      this.openAdd = true;
      this.titleAdd = "证书添加";
    },
    handleAddCert() {
      this.reset();
      this.status = 2; //为指定人员添加
      this.formAdd.personnelId = this.formCert.personnelId;
      this.formAdd.personnelName = this.formCert.personnel;
      this.$nextTick(() => {
        this.$refs["mychild"].parentHandleclick(this.formAdd.certPic);
      });
      this.openAdd = true;
      this.titleAdd = "证书添加";
    },
    handleUpdate(row) {
      console.log("row", row);
      this.reset();
      const theId = row.theid;
      getCertData(theId).then((response) => {
        this.formAdd = response.result;
        this.formAdd.personnelName = row.personnel;
        this.formAdd.categoryVal = response.result.category;
        this.$nextTick(() => {
          this.$refs["mychild"].parentHandleclick(this.formAdd.certPic);
        });
        this.openAdd = true;
        this.titleAdd = "修改";
      });
    },
    submitForm() {
      this.$refs["formAdd"].validate((valid) => {
        if (valid) {
          if (this.formAdd.theid != undefined) {
            updateCert(this.formAdd).then((response) => {
              this.msgSuccess("修改成功");
              this.openAdd = false;
              this.getListCert();
              this.getList();
            });
          } else {
            addCert(this.formAdd).then((response) => {
              this.msgSuccess("添加成功");
              this.openAdd = false;
              this.getListCert();
              this.getList();
            });
          }
        }
      });
    },
    cancel() {
      this.openAdd = false;
      this.reset();
    },
    reset() {
      this.formAdd = {
        /* personnelName: this.formCert.personnel,
        personnelId: this.formCert.personnelId, */
        personnelName: undefined,
        personnelId: undefined,
        personnelType: 1,
        certCode: undefined,
        certName: undefined,
        categoryId: undefined,
        categoryVal: undefined,
        startTime: undefined,
        endTime: undefined,
        lssuingAuthority: undefined,
        certPic: undefined,
        // sort: 0
      };
      this.resetForm("formAdd");
    },
    handleImport() {
      this.upload.title = "导入";
      this.upload.open = true;
    },
    importTemplate() {
      /* importTemplate().then(response => {
        this.download(response.msg);
      }); */
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    handleExport() {
      // const queryParams = this.queryParams;
      this.$confirm("是否确认导出?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // 调接口导出表
          // return exportRole(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
    // 获取当前选中证书类别的名称
    changeCert(val) {
      this.formAdd.categoryVal = val
        ? this.certOptions.find((ele) => ele.id === val).label
        : "";
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    findOverdue(val) {
      //证书状态
      if (val === 0) return "未过期";
      else if (val === 1) return "已过期";
    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    dataFilter(val) {
      this.value = val;
      if (val) {
        //val存在
        this.personnelOptions = this.personnelOptions2.filter((item) => {
          if (
            !!~item.fullName.indexOf(val) ||
            !!~item.fullName.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        //val为空时，还原数组
        this.personnelOptions = this.personnelOptions2;
      }
    },
    changePersonnel(val) {
      if (this.personnelOptions2.length > 0) {
        this.formAdd.personnelName = val
          ? this.personnelOptions2.find((ele) => ele.theid === val).fullName
          : "";
        this.personnelOptions = this.personnelOptions2;
      }
    },
  },
};
</script>

<style scoped lang="scss">
/* treeselect */
.vue-treeselect__input {
  display: block;
}
/deep/ .vue-treeselect__control {
  height: 32px;
  line-height: 32px;
  margin-top: 3px;
}
.el-table .active {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}

/* .el-date-editor*/
/deep/ .el-dialog__body .el-date-editor.el-input,
/deep/ .el-dialog__body .el-date-editor.el-input__inner {
  // width: 220px;
  width: auto !important;
}
</style>